/**
 * Created by maxiaoqiang on 2018/6/25.
 */
import React, {Component} from 'react';

import {Row, Col, Tree, Radio, Button} from 'antd';
const TreeNode = Tree.TreeNode;
const RadioGroup = Radio.Group;

import "./index.less";

const treeData = [
    {
        title: '个人中心',
        key: '0_0'
    }, {
        title: '权限管理',
        key: '0_1'
    }, {
        title: '课程管理',
        key: '0_2',
        children: [
            {title: '查看', key: '0_2_0'},
            {title: '添加', key: '0_2_1'},
            {title: '修改', key: '0_2_2'},
            {title: '删除', key: '0_2_3'}
        ]
    }, {
        title: '题库管理',
        key: '0_3',
        children: [
            {title: '查看', key: '0_3_0'},
            {title: '添加', key: '0_3_1'},
            {title: '修改', key: '0_3_2'},
            {title: '删除', key: '0_3_3'}
        ]
    }, {
        title: '成绩分析',
        key: '0_4'
    }, {
        title: '在线考试',
        key: '0_5',
        children: [
            {title: '正式考试', key: '0_5_0'},
            {title: '模拟考试', key: '0_5_1'},
            {title: '历年真题', key: '0_5_2'},
            {title: '鼎和模拟', key: '0_5_3'}
        ]
    }
];


class Authority extends Component {

    constructor(props) {
        super(props);
        this.state = {
            expandedKeys: ['0_0', '0_2'],
            autoExpandParent: true,
            checkedKeys: ['0_0'],
            selectedKeys: [],
            value: 1,
        }
    }

    onExpand = (expandedKeys) => {
        this.setState({
            expandedKeys,
            autoExpandParent: false
        });
    }
    onCheck = (checkedKeys) => {
        console.log('onCheck', checkedKeys);
        this.setState({checkedKeys});
    }
    onSelect = (selectedKeys, info) => {
        console.log('onSelect', info);
        this.setState({selectedKeys});
    }
    onChange = (e) => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    }
    renderTreeNodes = (data) => {
        return data.map((item) => {
            if (item.children) {
                return (
                    <TreeNode title={item.title} key={item.key} dataRef={item}>
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode {...item} />;
        });
    }

    render() {
        const radioStyle = {
            display: 'block',
            height: '30px',
            lineHeight: '30px'
        };
        return (
            <div>
                <Row gutter={16}>
                    <Col span={4} >
                        <RadioGroup onChange={this.onChange} value={this.state.value}>
                            <Radio style={radioStyle} value={1}>铜牌会员</Radio>
                            <Radio style={radioStyle} value={2}>银牌会员</Radio>
                            <Radio style={radioStyle} value={3}>金牌会员</Radio>
                            <Radio style={radioStyle} value={4}>白金会员</Radio>
                            <Radio style={radioStyle} value={5}>管理员</Radio>
                            <Radio style={radioStyle} value={6}>超级管理员</Radio>
                        </RadioGroup>
                    </Col>
                    <Col span={16} >
                        <Tree
                            checkable
                            onExpand={this.onExpand}
                            expandedKeys={this.state.expandedKeys}
                            autoExpandParent={this.state.autoExpandParent}
                            onCheck={this.onCheck}
                            checkedKeys={this.state.checkedKeys}
                            onSelect={this.onSelect}
                            selectedKeys={this.state.selectedKeys}
                        >
                            {this.renderTreeNodes(treeData)}
                        </Tree>
                    </Col>
                </Row>
                <div>
                    <Button type="primary">保存</Button>
                </div>

            </div>

        )
    }

}

export default Authority;